<template>
  <div>
    <div>
      <nut-row type="flex" gutter="10" align="center">
        <nut-col :span="24" style="margin-bottom:1rem;">
          <nut-tab @tab-switch="shiftTab">
            <nut-tab-panel tabTitle="{{ $t('UserAccountPage.sr') }}">
              <div class="empty-box" v-if="data_in.length==0">
                {{ $t('UserAccountPage.zwjl') }}
              </div>
              <div v-else>
                <div style="overflow: hidden;">
                  <div class="pull-left" style="width:30%;">{{ $t('UserAccountPage.mc') }}</div>
                  <div class="pull-left" style="width:20%">{{ $t('UserAccountPage.jq') }}</div>
                  <div class="pull-left" style="width:20%">{{ $t('UserAccountPage.lzyh') }}</div>
                  <div class="pull-left" style="width:30%;">{{ $t('UserAccountPage.cjrq') }}</div>
                </div>
                <nut-leftslip v-for="(item, index) in data_in" :key="item.id" ref="leftslip">
                  <div slot="slip-main" class="slip-main">
                    <div style="width:30%">{{item.title}}</div>
                    <div style="width:20%"><b>{{item.money}}</b></div>
                    <div style="width:20%"><b>{{item.from_username}}</b></div>
                    <div style="width:30%;">{{item.created_at}}</div>
                  </div>
                  <div slot="slipbtns" class="slipbtns"
                  ><a href="javascript:;" @click="handleClickRemoveIncome(item.id,index)">{{ $t('UserAccountPage.sc') }}</a></div
                  >
                </nut-leftslip>
                <div class="bottom-tips">{{ $t('UserAccountPage.gy') }}<b>{{data_in.length}}</b>{{ $t('UserAccountPage.tjl') }}</div>
                <div style="overflow: hidden;">
                  <div class="pull-left" style="width:30%;">{{ $t('UserAccountPage.mc') }}</div>
                  <div class="pull-left" style="width:20%">{{ $t('UserAccountPage.jq') }}</div>
                  <div class="pull-left" style="width:50%;">{{ $t('UserAccountPage.cjrq') }}</div>
                </div>
                <nut-leftslip v-for="(item, index) in data_out" :key="item.id" ref="leftslip">
                  <div slot="slip-main" class="slip-main">
                    <div style="width:30%">{{item.title}}</div>
                    <div style="width:20%"><b>{{item.money}}</b></div>
                    <div style="width:50%;">{{item.created_at}}</div>
                  </div>
                  <div slot="slipbtns" class="slipbtns"
                  ><a href="javascript:;" @click="handleClickRemoveCost(item.id,index)">{{ $t('UserAccountPage.sc') }}</a></div
                  >
                </nut-leftslip>
                <div class="bottom-tips">{{ $t('UserAccountPage.gy') }}<b>{{data_out.length}}</b>{{ $t('UserAccountPage.tjl') }}</div>
              </div>
            </nut-tab-panel>
            <nut-tab-panel tabTitle="{{ $t('UserAccountPage.zc') }}">
              <div class="empty-box" v-if="data_out.length==0">
                {{ $t('UserAccountPage.zwjl') }}
              </div>
              <div v-else>
                <div style="overflow: hidden;">
                  <div class="pull-left" style="width:30%;">{{ $t('UserAccountPage.mc') }}</div>
                  <div class="pull-left" style="width:20%">{{ $t('UserAccountPage.jq') }}</div>
                  <div class="pull-left" style="width:50%;">{{ $t('UserAccountPage.cjrq') }}</div>
                </div>
                <nut-leftslip v-for="(item, index) in data_out" :key="item.id" ref="leftslip">
                  <div slot="slip-main" class="slip-main">
                    <div style="width:30%">{{item.title}}</div>
                    <div style="width:20%"><b>{{item.money}}</b></div>
                    <div style="width:50%;">{{item.created_at}}</div>
                  </div>
                  <div slot="slipbtns" class="slipbtns"
                  ><a href="javascript:;" @click="handleClickRemoveCost(item.id,index)">{{ $t('UserAccountPage.sc') }}</a></div
                  >
                </nut-leftslip>
                <div class="bottom-tips">{{ $t('UserAccountPage.gy') }}<b>{{data_out.length}}</b>{{ $t('UserAccountPage.tjl') }}</div>
              </div>
            </nut-tab-panel>
          </nut-tab>
        </nut-col>
      </nut-row>
    </div>
    <MainNav nav_index="4" ref="main_nav"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";

export default {
  name: 'UserAccountPage',
    components: {MainNav},
    data () {
    return {
      msg: 'Hello order',
        loading:true,
        data_in:[],
        data_out:[],
    }
  },
    methods:{
        shiftTab(index){

        },
        getData(){
            this.$axios.get(this.$api_url.cost_list).then((res)=>{
                this.data_out = res.data.out;
                this.data_in = res.data.in;
            })
        },
        handleClickRemoveIncome(id,index){
            this.$axios.post(this.$api_url.income_del,this.$qs.stringify({
                id:id,
            })).then((res)=>{
                if(res.data.code == 0){
                    this.data_in.splice(index, 1);
                } else{
                    this.$toast.fail(res.data.msg);
                }
            })
        },
        handleClickRemoveCost(id,index){
            this.$axios.post(this.$api_url.cost_del,this.$qs.stringify({
                id:id,
            })).then((res)=>{
                if(res.data.code == 0){
                    this.data_out.splice(index, 1);
                } else{
                    this.$toast.fail(res.data.msg);
                }
            })
        },
    },
    mounted() {
      this.getData();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .nut-tab{
    border:none;
    padding:0;
  }
</style>
<style scoped>
  .empty-box ul{
    padding:0;
    margin:0;
    list-style: none;
  }
  .empty-box ul li{
    margin-bottom:1.2rem;
  }
  table{
    border-collapse: collapse;
    width:100%;
  }
  table td{
    border:thin solid #ccc;
    padding:0.5rem;

  }
  .tab-box{
    border:none;
    padding:0;
  }

  .pull-left{
    float: left;
  }
  .bottom-tips{
    height:2rem;
    line-height:2rem;
  }

</style>
